<template>
    <div class="moreimg-bg">
        <div class="moreimg-title">
            <img :src="moreImgTitleImg" alt="">
        </div>
        <div class="banxin moreing-main">
            <div class="moreimg-l">

            </div>
            <div class="moreimg-r">
                <!-- 每一个格子都是不同的风格内容 三张图片为一组渲染内容
                    不同的类名去控制  每一个格子里面有3张图片
                 -->
                <div v-for="(item) in moreImgImgInfo" :key="item.id" :class="{'moreimg-r-style3' : item.style == 3 , 'moreimg-r-style2' : item.style == 2 , 'moreimg-r-style1' : item.style == 1}">
                    <div class="img" v-for="(i,dex) in item.path" :key="dex">
                        <img :src="i" alt="">
                        <div class="info">vip</div>
                        <div class="download">下载</div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { imgInfo } from '@/request/api'
export default {
    data () {
        return {
            moreImgTitleImg : 'https://gd-hbimg.huaban.com/c4769b40fc12b77e8ce5c667a7768ed9e78feac93945a-Bbqa2i',
            moreImgImgInfo : [
                {
                    id : '1',
                    style : 2,
                    path  : [
                        'https://pic1.zhimg.com/80/v2-1e3d36f0a5016cb8b1371ee9ca6fb44d_720w.webp?source=1940ef5c',
                        'https://picx.zhimg.com/80/v2-7ffe396b0356f53d2fe2bc1119a5a0ee_720w.webp?source=1940ef5c',
                        'https://picx.zhimg.com/v2-c8664c22044c383571c36d9750e02715_r.jpg?source=1940ef5c'
                    ]
                },
                {
                    id : '2',
                    style : 1,
                    path  : [
                        'https://pica.zhimg.com/80/v2-af585a77146385ca1ea94c08a8790eaa_720w.webp?source=1940ef5c',
                        'https://picx.zhimg.com/80/v2-ad4d00003e3e474c127733ecbe9399d6_720w.webp?source=1940ef5c',
                        'https://pic1.zhimg.com/v2-3bca1d684b82c73a190900815ddeeb32_r.jpg?source=1940ef5c']
                },
                {
                    id : '3',
                    style : 3,
                    path  : [
                        'https://picx.zhimg.com/80/v2-f4cac69bb36eaa5f343ffb597cba15b2_720w.webp?source=1940ef5c',
                        'https://picx.zhimg.com/80/v2-c47dbd73332dde96b511771f84e952b8_720w.webp?source=1940ef5c',
                        'https://picx.zhimg.com/80/v2-3fcf3e5257cb49dcde52f0ce8f52ec9b_720w.webp?source=1940ef5c']
                },
                {
                    id : '4',
                    style : 2,
                    path  : [
                        'https://picx.zhimg.com/80/v2-f89937d624376a40f1ac1a38b5cc178a_720w.webp?source=1940ef5c',
                        'https://picx.zhimg.com/80/v2-271cebea3721334d45aa527e4411a18e_720w.webp?source=1940ef5c',
                        'https://picx.zhimg.com/80/v2-171b067be2c3bfa658c3a50eb7dd3328_720w.webp?source=1940ef5c']
                },
                {
                    id : '5',
                    style : 1,
                    path  : [
                        'https://picx.zhimg.com/80/v2-736b8712f195dddeffd74c8849114383_720w.webp?source=1940ef5c',
                        'https://pic1.zhimg.com/80/v2-8fd5ecc093fdcd900bb7079edb83b20c_720w.webp?source=1940ef5c',
                        'https://picx.zhimg.com/80/v2-2b505374404f936e4fafdc06e7b99e24_720w.webp?source=1940ef5c']
                },
                {
                    id : '6',
                    style : 3,
                    path  : [
                        'https://picx.zhimg.com/80/v2-1b3bf6ea58d54f9fb1172d21df31515d_720w.webp?source=1940ef5c',
                        'https://picx.zhimg.com/80/v2-850c2030eae8d89f58082801ea35ab40_720w.webp?source=1940ef5c',
                        'https://picx.zhimg.com/80/v2-536bc4bdefc677a143c1df0413338833_720w.webp?source=1940ef5c']
                },
                {
                    id : '7',
                    style : 2,
                    path  : [
                        'https://picx.zhimg.com/80/v2-e5cd851b71bb1ad86dd4ccf2a49586d0_720w.webp?source=1940ef5c',
                        'https://pica.zhimg.com/80/v2-4f2109efc5030cf7099744fb26ed740a_720w.webp?source=1940ef5c',
                        'https://pic1.zhimg.com/80/v2-90f099c2e33175a10898b8b458d4d069_720w.webp?source=1940ef5c']
                }
                // 增添模板:
                /*
                    {
                        id : '7',
                        style : 2,
                        path  : [
                            '',
                            '',
                            '']
                    }
                */
            ]
 
        }
    },
    created(){
        // 获取到携带而来的参数 根据不同的参数请求不同的数据 
        // let info = this.$route.query 
        // imgInfo(info.name).then(res => console.log(res))
    }
}
</script>
 
<style lang = "less" scoped>
    .moreimg-bg {
       .moreimg-title {
            img {
                width: 100%;
                height: 70px;
                display: block;
            }
        }
        .moreing-main {
            display: flex;
            /* overflow: hidden; */
            .moreimg-l {
                position: sticky;
                top: 0px;
                flex: 1;
                background-color: skyblue;
                height: 1200px;
            }
            .moreimg-r {
                flex: 6;
                overflow: hidden;
                &::after{
                    content: "";
                    display: block;
                    visibility: hidden;
                    height: 0;
                    width: 100%;
                    clear: both;
                }
                .moreimg-r-style1{
                    float: left;
                    height: 220px;
                    width: 100%;
                    .img{
                        overflow : hidden ; 
                        display: inline-block;
                        width: 33.33%;
                        height: 100%;
                        position: relative;
                        position: relative;
                        cursor: pointer;
                        box-sizing: border-box;
                        border: 2px solid white;
                        img {
                            position: absolute;
                            /* width: 400px; */
                            height: 100%;
                            left: 50%;
                            top: 50%;
                            transform: translateX(-50%) translateY(-50%); 
                        }
                        .info ,
                        .download{
                            position: absolute;
                            color: white;
                            font-family: 'myFont';
                            transition: all 0.2s;
                            max-width: 100%;
                            word-wrap: break-word;
                            width: 100%;
                            background-color: rgba(0, 0, 0, 0.5);
                        }
                        .info {
                            transform: translateX(-100%);
                            cursor: default;
                            opacity: 0;
                        }
                        .download {
                            bottom: 0px;
                            cursor: pointer;
                            line-height: 30px;
                            text-align: center;
                            transform: translateX(100%);
                            opacity: 0;
                        }
                        &:hover .info{
                            transform: translateX(0);
                            opacity: 1;
                            
                        }
                        &:hover .download{
                            transform: translateX(0);
                            opacity: 1;

                        }
                    }
                    
                }
                
                .moreimg-r-style2{
                    float: left;
                    height: 220px;
                    width: 100%;
                    .img{
                        overflow : hidden ; 
                        display: inline-block;
                        height: 100%;
                        position: relative;
                        cursor: pointer;
                        box-sizing: border-box;
                        border: 2px solid white;    
                        img {
                            position: absolute;
                            /* width: 400px; */
                            height: 100%;
                            left: 50%;
                            top: 50%;
                            transform: translateX(-50%) translateY(-50%); 
                        }
                        .info ,
                        .download{
                            position: absolute;
                            color: white;
                            font-family: 'myFont';
                            transition: all 0.2s;
                            max-width: 100%;
                            word-wrap: break-word;
                            width: 100%;
                            background-color: rgba(0, 0, 0, 0.5);
                        }
                        .info {
                            transform: translateX(-100%);
                            cursor: default;
                            opacity: 0;
                        }
                        .download {
                            bottom: 0;
                            transform: translateX(100%);
                            cursor: pointer;
                            line-height: 30px;
                            text-align: center;
                            opacity: 0;
                        }
                        &:hover .info{
                            transform: translateX(0);
                            opacity: 1;
                        }
                        &:hover .download{
                            transform: translateX(0);
                            opacity: 1;
                        }
                        &:nth-of-type(1){
                            width: 30%;
                        }
                        &:nth-of-type(2){
                            width: 40%;
                        }
                        &:nth-of-type(3){
                            width: 30%;
                        }
                    }
                }
                .moreimg-r-style3{
                    float: left;
                    height: 220px;
                    width: 100%;
                    .img{ 
                        overflow : hidden ; 
                        display: inline-block;
                        height: 100%;
                        position: relative;
                        cursor: pointer;
                        box-sizing: border-box;
                        border: 2px solid white;
                        img {
                            position: absolute;
                            /* width: 400px; */
                            height: 100%;
                            left: 50%;
                            top: 50%;
                            transform: translateX(-50%) translateY(-50%); 
                        }
                        .info ,
                        .download{
                            position: absolute;
                            color: white;
                            font-family: 'myFont';
                            transition: all 0.2s;
                            max-width: 100%;
                            word-wrap: break-word;
                            width: 100%;
                            background-color: rgba(0, 0, 0, 0.5);
                            opacity: 0;
                        }
                        .info {
                            transform: translateX(-100%);
                            cursor: default;
                        }
                        .download {
                            bottom: 0px;
                            cursor: pointer;
                            line-height: 30px;
                            text-align: center;
                            transform: translateX(100%);
                        }
                        &:hover .info{
                            transform: translateX(0);
                            opacity: 1;
                        }
                        &:hover .download{
                            transform: translateX(0);
                            opacity: 1;
                        }
                        &:nth-of-type(1){
                            width: 30%;
                        }
                        &:nth-of-type(2){
                            width: 30%;
                        }
                        &:nth-of-type(3){
                            width: 40%;
                        }
                    }
                }
            }
        } 
    }
    
</style>